<template>
  <div class="OrgBasicInfo-container">
    <a-form-model ref="ruleForm" :model="formInfo" :rules="rules">
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="上级公司名称"
            prop="orgId"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput disabled v-model="parentOrgInfo.name" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="组织名称"
            prop="name"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput :disabled="disabled" v-model="formInfo.name" placeholder="请输入组织名称"></BaseInput>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="组织编码"
            prop="code"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              :disabled="formInfo.code === 'PD' || disabled"
              v-model="formInfo.code"
              placeholder="请输入组织编码"
            ></BaseInput>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="组织类型"
            prop="type"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <a-select :disabled="disabled" v-model="formInfo.type" placeholder="请选择">
              <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="部门负责人"
            prop="principal"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput :disabled="disabled" v-model="formInfo.principal" placeholder="请输入部门负责人"></BaseInput>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="部门分管领导"
            prop="joblabel"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInput
              :disabled="disabled"
              ref="joblabelInput"
              allowClear
              v-model="formInfo.joblabel"
              placeholder="请选择"
              @focus="handleFocus"
            ></BaseInput>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
            label="排序号"
            prop="sortNum"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseInputNumber
              :disabled="disabled"
              v-model="formInfo.sortNum"
              placeholder="请输入"
            ></BaseInputNumber>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
            label="描述"
            prop="description"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
          >
            <BaseTextarea
              :disabled="disabled"
              v-model="formInfo.description"
              placeholder="请输入描述"
              :auto-size="{ minRows: 3, maxRows: 6 }"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <searchJob
      :visible="visibleState.searchJob"
      @handleCancel="visibleState.searchJob = false"
      @handleOk="handleOk"
    ></searchJob>
  </div>
</template>

<script>
import { getEditPost, addOrgList, editOrgListNew, getJobDetails, addOrgByTemplateNew } from '@/api/system/system'
import searchJob from './searchJob' // 绑定组织
import { typeList } from './model.js'
export default {
  name: 'OrgBasicInfo',
  components: {
    searchJob,
  },
  props: {
    recordId: {
      type: String,
      default: '',
    },
    parentId: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visibleState: {
        searchJob: false,
      },
      formInfo: {
        orgId: '',
        joblabel: '',
        leader: '',
        type: '',
      },
      rules: {
        orgId: [{ message: '请在工作岗位管理中选中组织', trigger: 'blur' }],
        name: [{ required: true, message: '请填写组织名称', trigger: 'blur' }],
        code: [{ required: true, message: '请填写组织编码', trigger: 'blur' }],
        type: [{ required: true, message: '选择组织类型', trigger: 'blur' }],
      },
      typeList: typeList,
      parentOrgInfo: {}
    }
  },
  watch: {
    'formInfo.type': {
      immediate: true,
      handler(val) {
        this.$emit('orgTypeChanged', val)
      },
    },
  },
  created() {
    this.getEditPostReq(this.parentId, true)
    this.getEditPostReq(this.recordId)
  },
  methods: {
    async handleSubmit(...args) {
      const [resolve, reject] = args
      await this.$refs.ruleForm.validate(async (valid) => {
        if(!valid) {
          reject && reject()
          return
        }
        try {
        const params = {
          ...this.formInfo,
          id: this.recordId,
          parentId: this.parentId,
        }
        const fn = this.recordId ? editOrgListNew : addOrgByTemplateNew
        const res = await fn(params)
        if (res.data) {
          this.$message.success('提交成功')
          this.$emit('update:recordId', res.data.id)
        } else {
          this.$message.error('提交失败')
        }
        resolve()
      } catch (e) {
        reject()
        console.error(e)
      }
      })
    },
    /**
     *  获取部门分管领导信息
     */
    async getJobDetailsReq(leaderId) {
      try {
        const params = {
          id: leaderId,
        }
        const res = await getJobDetails(params)
        this.formInfo.joblabel = res.data.pname
      } catch (e) {
        console.error(e)
      }
    },
    /**
     * 获取组织基本信息的详情
     */
    async getEditPostReq(id, onlyParent = false) {
      try {
        if (!id) return
        const params = {
          id,
        }
        const res = await getEditPost(params)
        if(onlyParent) {
          this.parentOrgInfo = res.data || {}
        } else {
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
        }
        if (this.formInfo.leader) {
          this.getJobDetailsReq(this.formInfo.leader)
        }
        }
      } catch (e) {
        console.error(e)
      }
    },
    handleFocus() {
      this.visibleState.searchJob = true
      this.$refs.joblabelInput.toBlur()
    },
    handleOk(e) {
      this.visibleState.searchJob = false
      this.formInfo.joblabel = e.label
      this.formInfo.leader = e.jobId
    },
  },
}
</script>

<style>
</style>